<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>翻译工具</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div class="translator-container" id="app">
    <!-- 语言选择 -->
    <div class="translator-header">
      <label for="language-select">翻译成的语言：</label>
      <select id="language-select" v-model="watchObj.translateLanguage">
        <option value="it">意大利</option>
        <option value="en">英语</option>
        <option value="fr">法语</option>
        <option value="de">德语</option>
        <option value="es">西班牙语</option>
      </select>
    </div>
    <!-- 翻译内容 -->
    <div class="translator-body">
      <textarea id="input-text" class="translator-input" placeholder="请输入内容" v-model="watchObj.iptContent"></textarea>
      <div id="output-text" class="translator-output">
        {{ watchObj.translateContent }}
      </div>
    </div>
    <!-- 文档翻译按钮 -->
    <div class="translator-footer">
      <button class="translate-button" onclick="translateText()">文档翻译</button>
    </div>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        timer: null,
        watchObj: {
          translateContent: '',
          iptContent: '',
          translateLanguage: 'it'
        },

      },
      watch: {

        //注意 这里的newval是整个对象，而不是某个属性
        watchObj: {
          deep: true,  //深度监听，同时监听所有子属性
          immediate: true,//一进入页面立即执行一次
          handler (newval, oldval) {

            //清除定时器
            clearTimeout(this.timer);
            //防抖
            this.timer = setTimeout(() => {
              console.log('iptContent changed', newval.iptContent);
              console.log('translateLanguage changed', newval.translateLanguage);
              this.watchObj.translateContent = newval.iptContent;
            }, 1000)

          }

        }


        //简单写法
        // watch: {

        //   'watchObj.oriContent' (newval, oldval) {

        //     //清除定时器
        //     clearTimeout(this.timer);
        //     //防抖
        //     this.timer = setTimeout(() => {
        //       console.log('oriContent changed', newval, oldval);
        //       console.log('oriContent changed', newval, oldval);
        //       this.watchObj.translateContent = newval;
        //     }, 1000)


        //   }
      }
    }
    )


  </script>
</body>

<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }

  .translator-container {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .translator-header {
    margin-bottom: 20px;
  }

  .translator-header label {
    font-weight: bold;
  }

  .translator-header select {
    margin-left: 10px;
    padding: 5px;
  }

  .translator-body {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
  }

  .translator-input,
  .translator-output {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border: none;
    resize: none;
  }

  .translator-input {
    background: #f9f9f9;
    border-right: 1px solid #ccc;
  }

  .translator-output {
    background: #ffffff;
  }

  .translator-footer {
    margin-top: 10px;
    text-align: center;
  }

  .translate-button {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .translate-button:hover {
    background-color: #0056b3;
  }
</style>

</html>